<template>
  <div class="container">
    <div class="tabs-lb">
      <span>能力概览</span>
    </div>
    <div class="container-header">
      <div v-for="(item,index) in headerList" :key="index" class="header-box">
        <div class="header-box-img">
          <img :src="item.url" alt />
        </div>
        <div class="header-box-text">
          <h3>{{item.name}}</h3>
          <span>{{ getUnit(item.number)}}</span>
        </div>
      </div>
    </div>
    <div class="container-content">
      <div class="left">
        <div
          class="nl-item"
          :class="{ 'nl-item-active': form.filter.jkflbh === '' }"
          @click="checkRow()"
        >
          <img class="img" src="~@/assets/img/main/qb.png" alt />
          全部
        </div>
        <div
          class="nl-item"
          @click="checkRow(item)"
          :class="{ 'nl-item-active': form.filter.jkflbh === item.jkflbh }"
          v-for="item in nlflList"
          :key="item.jkflbh"
        >
          <div>
            <el-row>
              <el-col :span="2.5">
                <div class="img"></div>
              </el-col>
              <el-col :span="19">
                <div class="jkflmc" :title="item.jkflmc">{{ item.jkflmc }}</div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="search">
          <el-input class="search-input" v-model="form.filter.gjc" placeholder="搜索能力">
            <el-button @click="changePageNum(1)" slot="append" icon="el-icon-search"></el-button>
          </el-input>
          <!-- TODO -->
          <el-select v-model="form.orderBy" @change="changePageNum(1)">
            <el-option v-for="item in orderbyList" :key="item.bm" :label="item.mc" :value="item.bm"></el-option>
          </el-select>
        </div>
        <div class="table-list">
          <nl-card
            class="nl-card"
            v-for="item in nlList"
            :key="item.jkbh"
            :data="item"
            type="sy"
            @clickRow="clickRow"
          ></nl-card>
        </div>
        <div style="clear: both"></div>
        <!-- 分页 -->
        <div class="page">
          <el-pagination
            background
            @size-change="changePageSize"
            @current-change="changePageNum"
            :current-page="form.pageNum"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="form.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
      <div style="clear:both"></div>
    </div>
  </div>
</template>
<script>
import jkglService from '@/api/jkgl'
import nlCard from '../../../components/nl-card.vue'

export default {
  components: { nlCard },
  data() {
    return {
      // 能力分类
      nlflList: [],
      // 能力列表
      nlList: [],
      form: {
        pageNum: 1,
        pageSize: 10,
        orderBy: 'fbsj DESC',
        filter: {
          jkflbh: '',
          gjc: '',
          fbzt: '已发布'
        },
      },
      orderbyList: [
        { mc: '最新', bm: 'fbsj DESC' },
        { mc: '最热', bm: 'dyrs DESC' },
        // { mc: '最多下载', bm: '3' }
        { mc: '总调用次数', bm: 'zdycs DESC' },
        { mc: '成功调用率', bm: 'qqcgl DESC' }
      ],
      total: 0,
      headerList: [
        {
          url: require('@/assets/img/grzx/03.png'),
          name: '能力接口',
          number: 0
        },
        {
          url: require('@/assets/img/grzx/01.png'),
          name: '对接系统数',
          number: 0
        },
        {
          url: require('@/assets/img/grzx/02.png'),
          name: '累积调用次数',
          number: 0
        }
      ],
    }
  },
  mounted() {
    // 获取能力接口数据
    this.getQuerNlgl();
    // 获取能力分类
    this.getNlfl()
    // 初始获取全部能力
    this.changePageNum(1);
  },
  methods: {
    /*
     * 获取能力分类
     */
    getNlfl() {
      const params = {}
      jkglService
        .queryJkfl(params)
        .then(res => {
          this.nlflList = res
        })
        .catch(err => {
          !err.isError &&
            this.$message({ type: 'warning', message: err.message })
        })
    },
    // 获取能力接口数据
    getQuerNlgl() {
      const params = {}
      jkglService
        .getQueryNlgl(params)
        .then(res => {
          this.headerList[0].number = res.nlsl;
          this.headerList[1].number = res.xtsl;
          this.headerList[2].number = res.dyzs;
        })
        .catch(err => {
          !err.isError &&
            this.$message({ type: 'warning', message: err.message })
        })
    },
    /* 点击分类树 */
    checkRow(item) {
      if (!item) {
        this.form.filter.jkflbh = ''
      } else {
        this.form.filter.jkflbh = item.jkflbh
      }
      this.changePageNum(1)
    },

    /*
     * 获取能力列表
     */
    getnlList() {
      const params = { ...this.form }
      jkglService
        .queryJkdy(params)
        .then(res => {
          this.nlList = res.list
          this.total = res.total
        })
        .catch(err => {
          !err.isError &&
            this.$message({ type: 'warning', message: err.message })
        })
    },

    /*
     * 分页
     */
    changePageNum(val) {
      this.form.pageNum = val
      this.getnlList()
    },

    /*
     * 分页
     */
    changePageSize(val) {
      this.form.pageSize = val
      this.form.pageNum = 1
      this.getnlList()
    },

    /*
     * 查看详情
     */
    clickRow(type, data) {
      if (type === 'look') {
        this.$router.push({
          path: '/nlxq',
          query: {
            cs: data.jkbh
          }
        })
      }
    },
    getUnit(num) {
      if (num / 100000000 >= 1) {
        return Math.floor(num / 100000000) + '亿+'
      } else if (num / 10000 >= 1) {
        return Math.floor(num / 10000) + '万+'
      } else {
        return num
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  .container-header {
    display: flex;
    margin-top: 20px;
    .header-box {
      display: flex;
      width: 33.33%;
      padding: 35px 30px 30px 60px;
      border: 1px solid #cecece;
      background-color: #fff;
      // .header-box-img {
      //   img {
      //     width: 50px;
      //     height: 50px;
      //   }
      // }
      .header-box-text {
        margin-left: 30px;
        h2 {
          color: #666666;
        }
        span {
          color: #2054be;
          font-size: 32px;
          font-weight: 700;
        }
      }
    }

    .header-box + .header-box {
      margin-left: 20px;
    }
  }

  .container-content {
    background-color: #fff;
    padding: 15px;
    margin-top: 15px;
    // overflow: hidden;
    .left {
      width: 350px;
      min-height: 500px;
      background-color: #ffffff;
      border: solid 1px #cecece;
      float: left;
      .nl-item {
        height: 40px;
        border-bottom: solid 1px #cecece;
        color: #666666;
        line-height: 40px;
        cursor: pointer;
        .jkflmc {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .img {
          width: 16px;
          height: 16px;
          float: left;
          margin: 12px;
        }
      }
      .nl-item-active {
        background-color: #e6f7ff;
        color: #006cff;
        border-right: 4px solid #007eff;
        box-sizing: border-box;
      }
    }
    .right {
      width: calc(100% - 380px);
      float: left;
      margin-left: 30px;
      .search {
        width: 100%;
        display: flex;
        justify-content: space-between;
        height: 50px;
        border-bottom: 1px solid #cecece;
        .search-input {
          width: 440px;
          height: 34px;
        }
        .search-select {
          width: 120px;
        }
      }
    }
    .table-list {
      width: 100%;
      min-height: 750px;
      margin-top: 20px;
      .nl-card {
        margin: 0 20px 20px 0;
        // width: calc(33.33% - 13.33px);
        width: 49%;
        float: left;
        &:nth-child(2n) {
          margin-right: 0;
        }
      }
    }
    .page {
      text-align: center;
    }
  }
}
</style>
